import React, { FC, useState, useEffect } from 'react'
import { Button, Col, Form, Input, Row, Select, theme, Space, Table, Tag, Empty, Spin, AutoComplete } from 'antd'
import qs from 'qs'
const { Option } = Select
import { Box, Line } from '@antv/g2plot'
import Item from 'antd/es/list/Item'
const QualityCharts: FC = () => {
  const [loading, setLoading] = useState(false)
  const { token } = theme.useToken()
  const [form] = Form.useForm()
  const [listData, setListData] = useState([])
  useEffect(() => {
    if (listData?.length > 0) {
      const boxPlot = new Box('chartsContainer', {
        autoFit: true, // 图表自适应屏幕大小
        xField: 'index',
        appendPadding: [0, 30, 0, 0],
        yField: ['delays_min', 'delays_low', 'delays_med', 'delays_upp', 'delays_max'],
        meta: {
          delays_min: {
            alias: '延迟最小值',
          },
          delays_low: {
            alias: '延迟下分位',
          },
          delays_med: {
            alias: '延迟中分位',
          },
          delays_upp: {
            alias: '延迟上分位',
          },
          delays_max: {
            alias: '延迟最大值',
          },
          delays_num: {
            alias: '延迟的次数',
          },
          delays_pth: {
            alias: '延迟路径',
          },
        },
        tooltip: {
          fields: ['delays_pth', 'delays_num', 'delays_min', 'delays_low', 'delays_med', 'delays_upp', 'delays_max'],
        },
        boxStyle: {
          stroke: '#545454',
          fill: '#1890FF',
          fillOpacity: 0.3,
        },
        yAxis: {
          // 使用对数刻度，可以兼容数据过大的展示问题
          type: 'log',
          nice: true,
        },
        xAxis: {
          // 一个数据的展示可能会有点问题
          max: listData.length <= 10 ? 10 : listData.length,
          nice: true,
          tickCount: listData.length,
        },
        data: listData,
      })
      boxPlot.render()
    }
  }, [listData])

  const handleSearch = (values: any) => {
    // 调用数据
    setListData([]) // 先将内容清除掉不清楚会出现问题
    setLoading(true)
    fetch(`/api/qmi/dst?${qs.stringify(values)}`, {
      method: 'get',
    })
      .then((response) => response.json())
      .then((res) => {
        setLoading(false)
        if (res.code === 0 && res.data?.info?.length > 0) {
          setListData(
            res.data.info.map((item: any, index: any) => ({
              ...item,
              index: index + 1,
            }))
          )
        }
      })
      .catch(() => {
        setListData([])
        setLoading(false)
      })
  }
  return (
    <div className="qualityChartsContainer">
      <Form form={form} name="data_list_search" onFinish={handleSearch}>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="size"
              label="页面行数"
              initialValue="10"
              rules={[{ required: true, message: '请填写页面行数' }]}
            >
              <Input placeholder="页面行数" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mirt" label="记录最早时间">
              <Input placeholder="记录最早时间" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mibt" label="服务最小时长">
              <Input placeholder="服务最小时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="miet" label="响应最小时长">
              <Input placeholder="响应最小时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="page"
              initialValue="1"
              label="页面页数"
              rules={[{ required: true, message: '请填写页面页数' }]}
            >
              <Input placeholder="页面页数" type="number" defaultValue="1" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mart" label="记录最晚时间">
              <Input placeholder="记录最晚时间" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mabt" label="服务最大时长">
              <Input placeholder="服务最大时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="maet" label="响应最大时长">
              <Input placeholder="响应最大时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="date" label="查询日期" initialValue="20230605">
              <Input placeholder="查询日期" type="text" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mial" label="访问最小长度">
              <Input placeholder="访问最小长度" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mirl" label="响应最小长度">
              <Input placeholder="响应最小长度" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="addr" label="访问地址">
              <Input placeholder="访问地址" type="text" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="maal" label="访问最大长度">
              <Input placeholder="访问最大长度" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="marl" label="响应最大长度">
              <Input placeholder="响应最大长度" type="number" />
            </Form.Item>
          </Col>
        </Row>
        <div style={{ textAlign: 'right' }}>
          <Space size="small">
            <Button type="primary" htmlType="submit" disabled={loading}>
              查询
            </Button>
            <Button
              onClick={() => {
                form.resetFields()
                setListData([]) // 是否可以直接将数据清空
              }}
            >
              清空
            </Button>
          </Space>
        </div>
      </Form>
      <div
        className="list"
        style={{
          width: '100%',
          textAlign: 'center',
          overflow: 'hidden',
          borderRadius: token.borderRadiusLG,
        }}
      >
        <Spin spinning={loading}>
          {listData && listData.length > 0 ? (
            <div
              id="chartsContainer"
              style={{
                width: '100%',
              }}
            ></div>
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
        </Spin>
      </div>
    </div>
  )
}

export default QualityCharts
